<!--<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>考勤记录月汇总</title>
    <link rel="stylesheet" href="/static/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="/static/plugin/zTree_v3/css/zTreeStyle/zTreeStyle.css">
    <link rel="stylesheet" href="/static/plugin/zTree_v3/css/demo.css">
    <script type="text/javascript" src="/static/plugin/jquery/jquery-3.3.1.js"></script>
    <script src="/static/plugin/zTree_v3/js/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="/static/layui/layui.js"></script>
    <script src="/static/plugin/ztree/js/jquery.ztree.core.js"></script>
    <script src="/static/plugin/ztree/js/jquery.ztree.excheck.js"></script>
    <script src="/static/plugin/ztree/js/jquery.ztree.exedit.js"></script>
</head>
<body class="layui-anim layui-anim-up">
<span class="layui-breadcrumb">
    <a href="">首页</a>
    <a>
      <cite>报表管理</cite>
    </a>
</span>

&lt;!&ndash;顶部检索框&ndash;&gt;
<div class="x-body">
    <div class="layui-row" style="margin-bottom: 18px">
        <div class="layui-form">
            <div class="layui-input-inline">
                <label class="layui-form-label">年月选择器</label>
                <div class="layui-input-inline" style="width: 150px">
                    <input type="text" class="layui-input" id="keyword1" placeholder="yyyy-MM" style="width: 150px">
                </div>
                <button class="layui-btn layui-btn-normal" data-type="reload"><i class="layui-icon layui-icon-search"></i>检索</button>
            </div>
        </div>
    </div>

    <table class="layui-hide" id="tableList" lay-filter="tableList"></table>
</div>

<script>
    layui.use(['table','layer','upload','form','laydate'], function() {
        var table = layui.table;
        var form = layui.form;
        var laydate = layui.laydate;

        //年月选择器
        laydate.render({
            elem: '#keyword1'
            ,type: 'month'
            ,value: new Date()
            ,done:function(value) {
                $('#keyword1').val(value);
            }
        });

        /*检索按钮点击事件*/
        var $ = layui.jquery, active = {
            reload:function () {
                var keyword1 = $("#keyword1").val();
                table.reload('contentTable',{
                    method:'get',
                    where:{"keyword1":keyword1}
                    ,page: {
                        curr: 1//重新从第 1 页开始
                    }
                });
            }
        }

        /*展示月报表数据*/
        var keyword1 = $("#keyword1").val();
        if(keyword1 == null || keyword1 == ''){
            keyword1 = getDate();
        }
        table.render({
            elem: '#tableList'
            ,id:'contentTable'
            ,where: {"remark1":keyword1}
            ,url: '/reportForms/queryMonthStatement'
            ,toolbar: '#toolbar'
            ,cols: [
                [ //表头
                    // {type: 'checkbox', fixed: 'left'},
                    {field:'uid', title:'序号', width: 60, type:'numbers',align:'center'}
                    ,{field: 'jobNumber', title: '工号', width: '10%'}
                    ,{field: 'realName', title: '姓名', width: '15%'}
                    ,{field: 'deptName', title: '部门', width: '15%'}
                    ,{field: 'sumTardy', title: '迟到天数', width: '15%'}
                    ,{field: 'sumEarly', title: '早退天数', width: '15%'}
                    ,{field: 'sumAttendance', title: '总出勤天数', width: '15%'}
                    ,{field: 'sumAbsenteeism', title: '总旷工天数'}
                ]
            ]
            , page: true
            ,totalRow: true
            ,done : function(res, curr, count){
                $('th').css({
                    'background-color': '#009688', 'color': '#fff','font-weight':'bold',
                })
            }
        });
    });

    //获取当前日期
    function getDate() {
        var myDate = new Date();
        var y = myDate.getFullYear();
        var m = myDate.getMonth()+1;//获取当前月份的日期
        if(m < 10){
            m = "0"+m;
        }
        var d = myDate.getDate();
        var mon = y+"-"+m;
        return mon;
    }
</script>
</body>
</html>-->
<!DOCTYPE html>
<html>
<head>
    <title>考勤月汇总</title>
    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" href="/static/plugin/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="/static/css/public.css" media="all" />
    <script type="text/javascript" src="/static/plugin/jquery/jquery-3.3.1.js"></script>
    <script type="text/javascript" src="/static/plugin/layui/layui.js"></script>
    <script type="text/javascript" src="/static/js/base.js"></script>
</head>
<script type="text/javascript"></script>
<body  class="layui-anim">
<div class="x-nav">
	    <span class="layui-breadcrumb">
	        <a href="">首页</a>
	        <a>
	            <cite>报表管理</cite>
	        </a>
	    </span>
</div>
<div class="x-body">
    <!--头部检索功能-->
    <div class="layui-row" style="margin-bottom: 18px">
        <form class="layui-form">
            <div class="layui-inline">
                <label class="layui-form-label">年月选择器</label>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" id="keyword1" placeholder="yyyy-MM-dd" style="width: 150px">
                </div>
                <button type="button" class="layui-btn layui-btn-normal" data-type="reload"><i class="layui-icon layui-icon-search"></i>检索</button>
            </div>
        </form>
    </div>

    <!--数据列表-->
    <table class="layui-hide" id="tableList" lay-filter="tableList"></table>
</div>

<script type="text/javascript">
    layui.use(['table','layer','upload','form','laydate'], function(){
        var table = layui.table;
        var layer = layui.layer;
        var form = layui.form;
        var laydate = layui.laydate;

        /*检索按钮点击事件*/
        var $ = layui.jquery, active = {
            reload:function () {
                var keyword1 = $("#keyword1").val();
                table.reload('contentTable',{
                    method:'get',
                    where:{"remark1":keyword1}
                    ,page: {
                        curr: 1//重新从第 1 页开始
                    }
                });
            }
        }

        //年月选择器
        laydate.render({
            elem: '#keyword1'
            ,type: 'month'
            ,value: new Date()
            ,done:function(value) {
                $('#keyword1').val(value);
            }
        });

        $(document).on("click", "td div.laytable-cell-checkbox div.layui-form-checkbox", function (e) {
            e.stopPropagation();
        });

        $('.layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        /*展示月报表数据*/
        var keyword1 = $("#keyword1").val();
        if(keyword1 == null || keyword1 == ''){
            keyword1 = getDate();
        }

        table.render({
            elem: '#tableList'
            ,id:'contentTable'
            ,where: {"remark1":keyword1}
            ,url: '/reportForms/queryMonthStatement'
            ,toolbar: '#toolbar'
            ,cols: [
                [ //表头
                    // {type: 'checkbox', fixed: 'left'},
                    {field:'uid', title:'序号', width: 60, type:'numbers',align:'center'}
                    ,{field: 'jobNumber', title: '工号', width: '10%'}
                    ,{field: 'realName', title: '姓名', width: '15%'}
                    ,{field: 'deptName', title: '部门', width: '15%'}
                    ,{field: 'sumTardy', title: '迟到天数', width: '15%'}
                    ,{field: 'sumEarly', title: '早退天数', width: '15%'}
                    ,{field: 'sumAttendance', title: '总出勤天数', width: '15%'}
                    ,{field: 'sumAbsenteeism', title: '总旷工天数'}
                ]
            ]
            , page: true
            ,totalRow: true
            ,done : function(res, curr, count){
                $('th').css({
                    'background-color': '#009688', 'color': '#fff','font-weight':'bold',
                })
            }
        });
    });

    //获取当前日期
    function getDate() {
        var myDate = new Date();
        var y = myDate.getFullYear();
        var m = myDate.getMonth()+1;//获取当前月份的日期
        if(m < 10){
            m = "0"+m;
        }
        var d = myDate.getDate();
        var mon = y+"-"+m;
        return mon;
    }
</script>
</body>
</html>
